<template>
    <view>
        <SearchInput></SearchInput>
        <Tabs :tabs="tabs" @tabsitemchange="handletabsitemchange">
            <block v-if="tabs[0].isActive">
                <view class="iot-first-tab">
                    <navigator class="iot-goods-item" :url="'/pages/goods-detail/index?goods_id=' + item.goods_id"
                        v-for="(item, index) in goods_list" :key="item.goods_id">
                        <!-- left -->

                        <view class="iot-goods-img-wrap">
                            <image :src="item.goods_small_logo" mode="widthFix"></image>
                        </view>

                        <!-- right -->

                        <view class="iot-goods-info-wrap">
                            <view class="iot-goods-name">
                                {{ item.goods_name }}
                            </view>
                            <view class="iot-goods-price">${{ item.goods_price }}</view>
                        </view>
                    </navigator>
                </view>
            </block>
            <block v-else-if="tabs[1].isActive"></block>
            <block v-else-if="tabs[2].isActive"></block>
        </Tabs>
    </view>
</template>

<script>
import SearchInput from '../../components/SearchInput/SearchInput';
import Tabs from '../../components/Tabs/Tabs';
import { request } from '../../request/index.js';

export default {
    components: {
        SearchInput,
        Tabs
    },
    data() {
        return {
            tabs: [
                {
                    id: 0,
                    value: '综合',
                    isActive: true
                },
                {
                    id: 1,
                    value: '销量',
                    isActive: false
                },
                {
                    id: 2,
                    value: '价格',
                    isActive: false
                }
            ],

            goods_list: [],

            Queryparams: {
                query: '',
                cid: '',
                pagenum: 1,
                pagesize: 10
            },

            totalpages: 1,
            isActive: ''
        };
    },
    onLoad(options) {
        this.Queryparams.cid = options.cid || '';
        this.Queryparams.query = options.query || '';
        this.getgoodslist();
    },
    onReachBottom() {
        if (this.Queryparams.pagenum >= this.totalpages) {
            uni.showToast({
                title: '没有下一页数据'
            });
        } else {
            this.Queryparams.pagenum++;
            this.getgoodslist();
        }
    },
    onPullDownRefresh() {

        this.goods_list = []

        this.Queryparams.pagenum = 1;
        this.getgoodslist();
    },
    methods: {
        async getgoodslist() {
            const res = await request({
                url: '/goods/search',
                data: this.Queryparams
            });
            const total = res.total;
            this.totalpages = Math.ceil(total / this.Queryparams.pagesize);
            //console.log(this.totalpages)

            this.goods_list = [...this.goods_list, ...res.goods]

            uni.stopPullDownRefresh();
        },

        handletabsitemchange(e) {
            const { index } = e.detail;
            let { tabs } = this;
            tabs.forEach((v, i) => (i === index ? (v.isActive = true) : (v.isActive = false)));

            this.tabs = tabs

        }
    }
};
</script>
<style>
@import './index.css';
</style>
